<template>
  <div class="ezviz-camera-preview">
<!--    <div v-if="loading" class="loading">-->
<!--      <el-spinner type="primary" />-->
<!--      <p>加载摄像头画面中...</p>-->
<!--    </div>-->
<!--    <div v-else-if="error" class="error">-->
<!--      <el-alert-->
<!--          :title="error"-->
<!--          type="error"-->
<!--          :closable="false"-->
<!--      />-->
<!--      <el-button @click="retryInitPlayer" type="primary" style="margin-top: 10px;">-->
<!--        重试-->
<!--      </el-button>-->
<!--    </div>-->
<!--    <div v-else id="video-container" ref="player"></div>-->
    <div id="video-container" ref="player"></div>

  </div>
</template>

<script>
import EZUIKit from 'ezuikit-js';
export default {
  name: 'EzvizCameraPreview',
  props: {
    url: {
      type: String,
      required: true
    },
    accessToken: {
      type: String,
      required: true
    },
    template: {
      type: String,
      default: 'simple'
    }
  },
  data() {
    return {
      player: null,
      loading: true,
      error: null,
      retryCount: 0,
      maxRetries: 3
    };
  },
  mounted() {
    this.initPlayer();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.stop();
    }
  },
  methods: {
    initPlayer() {
      this.loading = true;
      this.error = null;

      // if (typeof EZUIKit === 'undefined') {
      //   if (this.retryCount < this.maxRetries) {
      //     this.retryCount++;
      //     setTimeout(() => {
      //       this.initPlayer();
      //     }, 1000); // 等待1秒后重试
      //   } else {
      //     this.error = 'EZUIKit未加载。请刷新页面或检查网络连接。';
      //     this.loading = false;
      //   }
      //   return;
      // }

      try {
        // /* global EZUIKit */
        this.player = new EZUIKit.EZUIKitPlayer({
          id: 'video-container',
          url: "ezopen://open.ys7.com/L29334649/1.hd.live",
          accessToken: "ra.5re72ai38g4y7gky9ghls5dzb2equqku-491d6ysuja-0bzlevz-5zrd54nns",
          template: 'simple',
          env: {
            // https://open.ys7.com/help/1772?h=domain
            // domain默认是 https://open.ys7.com, 如果是私有化部署或海外的环境，请配置对应的domain
            // The default domain is https://open.ys7.com If it is a private deployment or overseas (outside of China) environment, please configure the corresponding domain
            domain: "https://open.ys7.com"
          }
        });

        this.player.on('error', (err) => {
          console.error('EZUIKit播放器错误:', err);
          this.error = `加载摄像头画面失败: ${err.msg || '未知错误'}`;
          this.loading = false;
        });

        this.player.on('play', () => {
          this.loading = false;
        });
      } catch (err) {
        console.error('初始化EZUIKit播放器失败:', err);
        this.error = '初始化摄像头预览失败。请稍后重试。';
        this.loading = false;
      }
    },
    retryInitPlayer() {
      this.retryCount = 0;
      this.initPlayer();
    }
  }
};
</script>

<style scoped>
.ezviz-camera-preview {
  width: 100%;
  height: 300px;
  position: relative;
}

#video-container {
  width: 100%;
  height: 100%;
}

.loading, .error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
}

.error {
  padding: 20px;
}
</style>

